import React from 'react'
import { Link } from 'react-router-dom'

const History: React.FC = () => {
  const history = [
    {
      id: '1',
      title: 'Beach Sunset Vlog',
      thumbnail: 'https://images.unsplash.com/photo-1604680804993-40ad2347c64a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fGJlYWNoJTIwZ2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      duration: '5:23',
      views: '12.4k',
      date: '2 days ago',
      companion: {
        id: '1',
        name: 'Sophia AI',
        avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      },
    },
    {
      id: '2',
      title: 'Morning Beach Walk',
      thumbnail: 'https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGJlYWNofGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60',
      duration: '8:45',
      views: '8.7k',
      date: '3 days ago',
      companion: {
        id: '1',
        name: 'Sophia AI',
        avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      },
    },
  ]

  return (
    <div className="min-h-screen bg-app-dark text-white">
      <div className="p-4">
        <h1 className="text-2xl font-bold mb-6">Watch History</h1>
        <div className="space-y-4">
          {history.map((item) => (
            <Link key={item.id} to={`/video/${item.id}`} className="block">
              <div className="flex space-x-3">
                <div className="relative w-32 h-20 rounded-lg overflow-hidden">
                  <img
                    src={item.thumbnail}
                    alt={item.title}
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-1 rounded">
                    {item.duration}
                  </div>
                </div>
                <div className="flex-1">
                  <h3 className="font-medium">{item.title}</h3>
                  <div className="flex items-center space-x-2 mt-1">
                    <div className="w-6 h-6 rounded-full overflow-hidden">
                      <img
                        src={item.companion.avatar}
                        alt={item.companion.name}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <span className="text-gray-400 text-sm">{item.companion.name}</span>
                  </div>
                  <div className="flex items-center text-gray-400 text-xs mt-1">
                    <span>{item.views} views</span>
                    <span className="mx-2">•</span>
                    <span>{item.date}</span>
                  </div>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}

export default History 